/*
 * @Author: yangrongxin
 * @Date: 2021-08-09 11:18:22
 * @LastEditors: guoju
 * @LastEditTime: 2022-01-07 11:30:20
 */
import { useState, useEffect } from 'react';
import { View, Image, Text, OpenData } from '@tarojs/components';
import { AtIcon } from 'taro-ui';
import { useRouter } from '@tarojs/taro';
import { Bar, Radar } from '@/components/index';
import { getEvaluationReport } from './service';
import { TestReportData, CHART_NAME_TYPE, CHART_TYPE } from './index.d';
import styles from './index.module.less';

/* 测评类型的枚举信息 */
export const CHART_NAME: any = {
  [CHART_NAME_TYPE.TOTAL]: '总分',
  [CHART_NAME_TYPE.AVERAGE]: '总均分',
  [CHART_NAME_TYPE.DIM_TOTAL]: '维度总分',
  [CHART_NAME_TYPE.DIM_AVER]: '维度总均分',
  [CHART_NAME_TYPE.CUS_TOTAL]: '自定义总均分',
};

const TestReport = () => {
  const {
    params: { measureTableRecordId },
  } = useRouter();

  const [testData, setTestData] = useState<TestReportData>({
    name: '', // 用户名称
    title: '', // 测评名称
    comment: '', // 量表评语
    dimensionMap: [], // 维度信息
    suggest: '', // 建议
    auditDoctorSignature: '', // 当前审阅医生签名
  });

  useEffect(() => {
    // 获取测评报告数据
    getEvaluationReport({
      // measureTableRecordId: '263604925307555654',
      measureTableRecordId: measureTableRecordId || '263604925307555654',
    }).then((res: any) => {
      if (res) setTestData(res);
    });
  }, []);

  const { name, title, comment, dimensionMap = [], scoreTableShow = [], resultChart = [],
    suggest,
    auditDoctorSignature
  } = testData;

  // 渲染对应的表单数据
  const renderChars = () => {
    return resultChart.map((charItem: any) => {
      const {
        chartType,
        isCompare, // 是否比较上次
        max, // 最大值
        score, // 最大值
        scoreType, // 分数名称选项
      } = charItem;
      const chartData: any[] = []; // 设置图标的展示数据
      switch (chartType) {
        // TODO: 绘制对应的图表
        case CHART_TYPE.BAR:
          // 计算当前的柱状图的数据
          score.forEach((item: any) => {
            chartData.push({
              item: item.name,
              user: CHART_NAME[scoreType],
              score: item.score,
              userMax: '参考值(最大)',
              userMaxScore: max,
              userMin: '参考值(最小)',
              userMinScore: 0,
            });
          });
        return <Bar chartData={chartData} userDataName={CHART_NAME[scoreType]} />;
        case CHART_TYPE.BAR2:
        case CHART_TYPE.GAUGE:
        case CHART_TYPE.LINE:
        case CHART_TYPE.PIE: return <View>{CHART_NAME[scoreType]}：{Array.isArray(score) ? score.map((scoreItem: any) => `${scoreItem.name}：${scoreItem.score}` ) : score}</View>;
        case CHART_TYPE.RADAR:
          score.forEach((item: any) => {
            chartData.push({
              item: item.name,
              user: '参考值（最小）',
              score: 0,
            });
            chartData.push({
              item: item.name,
              user: '参考值（最大）',
              score: max,
            });
            chartData.push({
              item: item.name,
              user: CHART_NAME[scoreType],
              score: item.score,
            });
          });
          return <Radar chartData={chartData} />;
        default:return <View>暂不支持当前图表</View>;
      }
    });
  };

  return (
    <View className={styles.container}>
      {/* 展示顶部 */}
      <View className={styles.header}>
        <View className={styles.userHeader}>
          <OpenData type="userAvatarUrl" />
        </View>
        <View className={styles.userInfo}>
          <Text>{name}</Text>
          <Text>{`${title ? `${title}测评报告` : ''}`}</Text>
        </View>
        {/* 分享按钮 -- 隐藏 bug 20231 */}
        {/* <View className={styles.share}>
          <AtIcon prefixClass="icon" value="share21" />
        </View> */}
      </View>
      {/* 展示评估信息 */}
      <View className={styles.tagContent}>
        <View>
          <Text>华西心理评估中心</Text>
          <Text>Huaxi PAC</Text>
        </View>
        <View>
          <AtIcon prefixClass="icon" value="fengxian" size="16" />
        </View>
      </View>
      {/* 展示图文报告 */}
      <View className={styles.imageText}>
        <View className={styles.beforeTitle}>
          <Text>图文报告</Text>
        </View>
        {/* 展示图标的主要区域 */}
        <View>
          {renderChars()}
        </View>
      </View>
      {/* 展示维度评语 */}
      <View className={styles.dimensionMapContent}>
        {/* header  */}
        {
          scoreTableShow.length !== 0 && (
            <View>
              <Text>名称</Text>
              <Text>得分</Text>
            </View>
          )
        }
        {scoreTableShow.map(([scroeName, score]: any, scoreItemIndex: number) => {
          return (
            <View key={String(scoreItemIndex)}>
              <Text>{scroeName}</Text>
              <Text>{score}</Text>
            </View>
          );
        })}
      </View>
      {/* 展示评语 */}
      {comment && (
        <View className={styles.comment}>
          <View className={styles.beforeTitle}>
            <Text>评语</Text>
          </View>
          {/* 展示对应的结果字段 */}
          {
            dimensionMap.map((item: any, itemIndex: number) => {
              return <View className={styles.conclusionItem} key={String(itemIndex)}>
                <Text>{item.name}结论：</Text>
                <View>{item.comment}</View>
              </View>;
            })
          }
          <View className={styles.conclusionItem}>
            <Text>总结结论：</Text>
            <View className="braft-output-content taro_html" dangerouslySetInnerHTML={{ __html: comment }}></View>
          </View>
        </View>
      )}
      {
        suggest && (
          <View className={styles.comment}>
            <View className={styles.beforeTitle}>
              <Text>建议</Text>
            </View>
            <View className={styles.conclusionItem}>
              {suggest}
            </View>
          </View>
        )
      }
      {
        auditDoctorSignature && (
          <View className={styles.auditImage}>
            <View className={styles.beforeTitle}>
              <Text>审阅医生</Text>
            </View>
            <View className={styles.conclusionItem}>
              <Image src={auditDoctorSignature} />
            </View>
          </View>
        )
      }
    </View>
  );
};

export default TestReport;
